<template>
  <div>
    <ly-dialog
      v-model="dialogVisible"
      :title="loadingTitle"
      width="560px"
      :before-close="handleClose"
    >
      <el-form
        :inline="false"
        :model="formData"
        :rules="rules"
        ref="rulesForm"
        label-position="right"
        label-width="130px"
      >
      <el-form-item label="所在省：" prop="province" v-if="authority([2])">
          <el-input
            v-model.trim="formData.province"
            placeholder="请输入所在省"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="所在城市：" prop="city" v-if="authority([2])">
          <el-input
            v-model.trim="formData.city"
            placeholder="请输入所在城市"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="所在区县：" prop="county" v-if="authority([2])">
          <el-input
            v-model.trim="formData.county"
            placeholder="请输入所在区县"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="学校名称："
          prop="school_name"
          v-if="authority([2])"
        >
          <el-input
            v-model.trim="formData.school_name"
            placeholder="请输入学校名称"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="学校类别："
          prop="school_type"
          v-if="authority([2])"
        >
          <el-input
            v-model.trim="formData.school_type"
            placeholder="请输入学校类别"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

         

        <el-form-item label="学校人数：" prop="school_num">
          <el-input
            v-model.trim="formData.school_num"
            placeholder="请输入学校人数"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="班级个数：" prop="class_num">
          <el-input
            v-model.trim="formData.class_num"
            placeholder="请输入班级个数"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="教师个数：" prop="teacher_num">
          <el-input
            v-model.trim="formData.teacher_num"
            placeholder="请输入教师个数"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="学校负责人姓名" prop="director_name">
          <el-input
            v-model.trim="formData.director_name"
            placeholder="请输入学校该项目负责人姓名"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="学校负责人电话" prop="director_phone">
          <el-input
            v-model.trim="formData.director_phone"
            placeholder="请输入学校该项目负责人电话"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="职务" prop="job">
          <el-input
            v-model.trim="formData.job"
            placeholder="职务"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="在地工作人员名称"
          v-if="authority([2])"
          prop="user_name"
        >
          <el-select
            v-model="formData.user_name"
            placeholder="请选择在地工作人员名称"
            clearable
            style="width: 300px"
            @change="search(1, $event)"
          >
            <el-option
              v-for="item in userIdList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> 
        <el-form-item
          label="线上区域负责人名称"
          prop="zxuser_name"
          v-if="authority([2])"
        >
          <el-select
            style="width: 300px"
            v-model="formData.zxuser_name"
            filterable
            remote
            placeholder="线上区域负责人"
            :remote-method="remoteMethod"
            :loading="loading"
            @change="search(6, $event)"
          >
            <el-option
              v-for="item in filteredZregIdLists"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> 

        <el-form-item label="年级：" prop="grade">
          <el-input
            v-model.trim="formData.grade"
            placeholder="请输入年级"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="学校班级：" prop="class_name">
          <el-input
            v-model.trim="formData.class_name"
            placeholder="请输入学校班级"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="班级课程：" prop="course">
          <el-input
            v-model.trim="formData.course"
            placeholder="请输入班级课程"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="第几节：" prop="some">
          <el-input
            v-model.trim="formData.some"
            placeholder="请输入第几节"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="周几：" prop="week">
          <el-input
            v-model.trim="formData.week"
            placeholder="请输入周一至周日"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="上课时间：" prop="tart_time">
          <el-input
            v-model.trim="formData.tart_time"
            placeholder="请输入上课时间"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"></el-input>
        </el-form-item>

        <el-form-item label="下课时间:" prop="end_time">
          <el-input
            v-model.trim="formData.end_time"
            placeholder="请输入下课时间"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"></el-input>
        </el-form-item>

        <el-form-item label="实际上课时间:" prop="num_time">
          <el-input
            v-model.trim="formData.num_time"
            placeholder="请输入实际上课时间"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="在地老师名称:" prop="zuser_name">
          <el-input
            v-model.trim="formData.zuser_name"
            placeholder="请输入在地老师名称"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="联系电话:" prop="user_phone">
          <el-input
            v-model.trim="formData.user_phone"
            placeholder="请输入联系电话"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>

        <el-form-item label="班级规模:" prop="class_mode">
          <el-input
            v-model.trim="formData.class_mode"
            placeholder="请输入班级规模"
            style="width: 300px"
            :disabled="loadingTitle == '详情'"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose" :loading="loadingSave">取消</el-button>
        <el-button
          type="primary"
          @click="submitData"
          :loading="loadingSave"
          :disabled="loadingTitle == '详情'"
          >确定</el-button
        >
      </template>
    </ly-dialog>
    
  </div>
</template>
  
  <script>
import {
  schoolAdd,
  schoolUpdate,
  addressAreaRoot,
  schoolIdList,
  zregionuser,
} from "@/api/api";
import { dayjs } from "element-plus";
import LyDialog from "@/components/dialog/dialog.vue";
import { setStorage, getStorage } from "@/utils/util";

export default {
  emits: ["refreshData"],
  name: "addAdmin",
  components: { LyDialog },
  data() {
    return {
      filteredZregIdLists: [],
      dialogVisible: false,
      loadingSave: false,
      loadingTitle: "新增学校",
      userIdList: [],
      planList: [
        {
          value: "1",
          label: "待制定",
          id: "1",
        },
        {
          value: "2",
          label: "已制定",
          id: "2",
        },
      ],
      inSchoolPlan: [
        {
          value: "1",
          label: "待审核",
          id: "1",
        },
        {
          value: "2",
          label: "已审核",
          id: "2",
        },
      ],
      isStatusList: [
        {
          value: "1",
          label: "未排课",
          id: "1",
        },
        {
          value: "2",
          label: "已排课",
          id: "2",
        },
      ],
      formData: {
        city: "", // 所在城市
        county: "", // 所在区县
        school_name: "", // 学校名称
        school_type: "", // 学校类别
        school_level: "", // 学校级别
      },
      rules: {
        province: [{ required: true, message: "请输入所在省份", trigger: "blur" }],
        city: [{ required: true, message: "请输入所在城市", trigger: "blur" }],
        county: [
          { required: true, message: "请输入所在区县", trigger: "blur" },
        ],
        school_name: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
        ],
        school_type: [
          { required: true, message: "请输入学校类别", trigger: "blur" },
        ],
        school_level: [
          { required: true, message: "请输入学校级别", trigger: "blur" },
        ],
        school_num: [
          { required: true, message: "请输入学校人数", trigger: "blur" },
        ],
        class_num: [
          { required: true, message: "请输入班级个数", trigger: "blur" },
        ],
        teacher_num: [
          { required: true, message: "请输入教师个数", trigger: "blur" },
        ],
        director_name: [
          { required: true, message: "请输入学校负责人姓名", trigger: "blur" },
        ],
        director_phone: [
          { required: true, message: "请输入学校负责人电话", trigger: "blur" },
        ],
        job: [{ required: true, message: "请输入职务", trigger: "blur" }],
        user_name: [
          { required: true, message: "选择在地工作人员", trigger: "change" },
        ],
        zxuser_name: [
          { required: true, message: "选择在线区域负责人", trigger: "change" },
        ],
        grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
        class_name: [
          { required: true, message: "请输入学校班级", trigger: "blur" },
        ],
        course: [
          { required: true, message: "请输入班级课程", trigger: "blur" },
        ],
        some: [{ required: true, message: "请输入第几节", trigger: "blur" }],
        week: [{ required: true, message: "请输入周几", trigger: "blur" }],
        tart_time: [
          { required: true, message: "请输入上课时间", trigger: "change" },
        ],
        end_time: [
          { required: true, message: "请输入下课时间", trigger: "change" },
        ],
        num_time: [
          { required: true, message: "请输入实际上课时间", trigger: "blur" },
        ],
        zuser_name: [
          { required: true, message: "请输入在地老师名称", trigger: "blur" },
        ],
        user_phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        class_mode: [
          { required: true, message: "请输入班级规模", trigger: "blur" },
        ],
      },
      GroupList: [], //管理员分组列表
      zregIdList: [], //在线管理员
      AreaRootList: [], //区域列表获取
      passwordSwitch: false, //是否修改密码
      linePlanList: [
        {
          value: "1",
          label: "是",
          id: "1",
        },
        {
          value: "2",
          label: "否",
          id: "2",
        },
      ],
      status: 1,

      loading: false,
    };
  },
  created() {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    // 在线工作人员搜索
    remoteMethod(query) {
      const that = this;
      //console.log(query, "query");

      if (query) {
        this.loading = true;

        // 模拟异步操作
        setTimeout(() => {
          that.loading = false;
          that.filteredZregIdLists = that.zregIdList.filter((item) => {
            //console.log(item.label.includes(query), "------that.zregIdList");
            return item.label.toLowerCase().includes(query.toLowerCase());
          });
          //console.log(that.filteredZregIdLists, "-------filteredZregIdLists");
        }, 200);
      } else {
        that.filteredZregIdLists = [];
        that.loading = false;
      }
    },
    search(i, e) {
      //console.log(i, e, "---------search");
      if (i === 1) {
        // 在地工作人员筛选
        this.formData.user_id = this.userIdList.find(
          (item) => item.value == e
        ).value;
        this.formData.user_name = this.userIdList.find(
          (item) => item.value == e
        ).label;
      }

      if (i === 2) {
        this.formData.instrument = this.linePlanList.find(
          (item) => item.value == e
        ).value;
      }

      if (i === 3) {
        this.formData.state = this.inSchoolPlan.find(
          (item) => item.value == e
        ).value;
      }

      if (i === 4) {
        this.formData.is_status = this.isStatusList.find(
          (item) => item.value == e
        ).value;
      }
      if (i === 5) {
        // 线上区域负责人选择
        this.formData.zxuser_id = this.zregIdList.find(
          (item) => item.value == e
        ).value;
        this.formData.zxuser_name = this.zregIdList.find(
          (item) => item.value == e
        ).label;
      }
      if (i === 6) {
        // 线上区域负责人选择--这个才是
        this.formData.zxuser_id = this.zregIdList.find(
          (item) => item.value == e
        ).value;
        this.formData.zxuser_name = this.zregIdList.find(
          (item) => item.value == e
        ).label;
      }
    },
    getData(e) {
      this.formData.status = e;
    },
    handleClose() {
      this.dialogVisible = false;
      this.loadingSave = false;
      this.formData = {};
      this.passwordSwitch = false;
      this.$emit("refreshData");
    },
    addModuleFn(item, flag, GroupList) {
      this.loadingTitle = flag;
      this.dialogVisible = true;
      //console.log(GroupList, "---------GroupList");
      if (this.authority([1, 2])) {
        // 超管和在地区域
        schoolIdList().then((res) => {
          this.userIdList = res.data.map((item) => {
            return {
              value: item.id,
              label: item.username,
            };
          });
        });
        zregionuser().then((res) => {
          this.zregIdList = res.data.map((item) => {
            return {
              value: item.id,
              label: item.username,
            };
          });
          //console.log(this.zregIdList, "---------------1");
        });
      }
      if (!this.GroupList&&!this.GroupList.length) this.GroupList = GroupList;
      if (item) {
        this.formData = item;
        this.formData.status = Number(this.formData.status);
      }
    },

    submitDataOne() {
      let vm = this;

      this.$refs["rulesForm"].validate((obj) => {
        if (obj) {
          this.loadingSave = true;

          if (vm.passwordSwitch && vm.formData.passwordEdit) {
            // 有修改密码 修改函数和原始密码函数替换 删除修改的函数
            vm.formData.password = vm.formData.passwordEdit;
            delete vm.formData.passwordEdit;
          }
          let param = {
            ...this.formData,
          };
          Object.assign(param, { ["status_text"]: undefined });

          if (vm.formData.id) {
            // 确定核校
            param.status = vm.status;
            param.is_status = 1;

            schoolUpdate(param).then((res) => {
              vm.loadingSave = false;
              console.log('更新成功---1')
              if (res.code == 1) {
                vm.$message.success(res.msg);
                vm.handleClose();
                vm.$emit("refreshData");
              } else {
                vm.$message.warning(res.msg);
              }
            });
          } else {
            // this.formData.status = 2
            param.status = vm.status;
            param.is_status = 1;

            schoolAdd(param).then((res) => {
              console.log('更新成功---2')

              vm.loadingSave = false;
              if (res.code == 1) {
                vm.$message.success(res.msg);
                vm.handleClose();
                vm.$emit("refreshData", 1);
              } else {
                vm.$message.warning(res.msg);
              }
            });
          }
        }
      });
    },
    submitData() {
      let vm = this;
      if (vm.passwordSwitch && vm.formData.passwordEdit) {
        vm.$confirm("您修改了改用户的原始密码，您确定要进行密码修改吗?", {
          closeOnClickModal: false,
        })
          .then((res) => {
            vm.submitDataOne();
          })
          .catch(() => {});
      } else {
        vm.submitDataOne();
      }
    },
    imgBeforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJPG) {
        this.$message.error("图片只能是 JPG/PNG 格式!");
        return false;
      }
      return isJPG;
    },
    // async imgUploadRequest(param) {
    //     var vm = this
    //     let obj= await platformsettingsUploadPlatformImg(param)
    //     if(obj.code == 1) {
    //         let res=''
    //         if (obj.data.data[0].indexOf("://")>=0){
    //             res = obj.data.data[0]

    //         }else{
    //             res = url.split('/api')[0]+obj.data.data[0]
    //         }
    //         vm.formData.default_image = res
    //     } else {
    //         vm.$message.warning(res.msg)
    //     }
    // },
    imgUploadSuccess(res) {
      // if (res) {
      //     this.formData.image = res.url
      // }
    },
    getAreaRoot() {
      // 地区列表获取
      let objs = {
        page: 1,
        per_page: 999, //设置最长数据
      };
      addressAreaRoot(objs).then((res) => {
        if (res.code == 1) {
          //console.log(res, "数据获取成功------------");
          this.AreaRootList = res.data.data;
        }
      });
    },
  },
  mounted() {
    //console.log("开始获取，‘-----------", this.refreshData);
    this.status = this.authority([2]) ? 1 : 2;
    //this.getAreaRoot();
  },
};
</script>
  <style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>
  